<template>
	<view class="">
		<u-navbar :border-bottom="false" :title="navTitle" :title-size="36" :title-bold="true" :title-color="textColor" :background="{background: '#fff'}"></u-navbar>
		<view class="u-p-l-20 u-p-r-20" style="background-color: #fff;">
			<view  class="u-p-t-30 u-p-b-30 u-font-32  u-flex u-col-center" style="background-color: #fff;">
				<view class="sn-must-input" style="font-weight: 500;">
					模板名称
				</view>
				<u-input v-model="initData.name" class="u-m-l-30" placeholder="请输入模板名称"  />
			</view>
		</view>
		<view class="u-p-l-20 u-p-r-20 u-m-t-20" style="background-color: #fff;">
			<view  class="u-p-t-30 u-p-b-30 u-font-32  u-flex u-col-center" style="background-color: #fff;">
				<view class="" style="font-weight: 500;">
					模板类型（可不选）
				</view>
			</view>
		</view>
		<view class="u-p-l-35 u-p-r-35" style="background-color: #fff;" >
			<u-checkbox-group @change="priceTypeChange" :wrap="true" :size="40" :icon-size="20" :label-disabled="false" shape="circle" :active-color="themeColor" >
				<view class="u-flex u-row-between u-p-t-40 u-p-b-40 check-item" v-for="item in priceTemplateTypeList" :key="$u.guid()" style="width: 100%;"  >
					<view class="" style="flex:1">{{item.name}}
						<text style="color:rgb(192, 196, 204);" class="u-font-26 u-m-l-10">({{item.text}})</text>
					</view>
					<u-checkbox
						v-model="item.isCheck"
						:name="item.value"
						class="choose-radio"
					>
					</u-checkbox>
				</view>
			</u-checkbox-group>
		</view>
		<view v-if="initData.priceTemplateType!==0">
			<view class="u-p-l-20 u-p-r-20 u-m-t-20" style="background-color: #fff;">
				<view  class="u-p-t-30 u-p-b-30 u-font-32 " style="background-color: #fff;">
					<view class="sn-must-input" style="font-weight: 500;">
						签约条件
					</view>
					<u-input v-model="initData.profile" :type="'textarea'"  class="u-m-l-20" placeholder="请输入签约条件"  />
				</view>
			</view>
			<view class="">
				<view class="u-p-20 u-m-t-20 u-font-32 sn-must-input" style="background-color: #fff;font-weight: 500;">
					客户可用支付方式（多选）
				</view>
				<view class="u-p-t-30 u-p-b-30 u-text-center" v-if="methodList.length===0">
					您没有设置任何一种收款方式，请前往店铺设置中配置！
				</view>
				<view class="u-p-l-35 u-p-r-35" style="background-color: #fff;" v-else>
					<u-checkbox-group @change="checkboxGroupChange" :wrap="true" :size="40" :icon-size="20" :label-disabled="false" shape="circle" :active-color="themeColor" >
						<view class="u-flex u-row-between u-p-t-40 u-p-b-40 check-item" style="width: 100%;" v-for="(item, index) in methodList" :key="index" >
							<view class="" style="flex:1">
								{{item.name}}
							</view>
							<u-checkbox
								v-model="item.isCheck"
								:name="item.id"
								class="choose-radio"
							>
							</u-checkbox>
						</view>
					</u-checkbox-group>
				</view>
				<view class="" v-if="true">
					<view class="u-p-20 u-m-t-20 u-font-32" style="background-color: #fff;font-weight: 500;">
						运费
					</view>
					<view class="u-p-l-35 u-p-r-35" style="background-color: #fff;" >
						<view  class=" u-p-t-30 u-p-b-30 u-font-32  u-flex u-col-center" style="background-color: #fff;">
							<view class="">
								起购到付额
							</view>
							<u-input v-model="initData.baseValue" class="u-m-l-30" placeholder="满额可下单，运费到付" :type="'number'" />
							<view class="">
								元
							</view>
						</view>
						<view  class=" u-p-t-30 u-p-b-30 u-font-32  u-flex u-col-center" style="background-color: #fff;">
							<view class="">
								包邮自提额
							</view>
							<u-input v-model="initData.freeShippingValue" class="u-m-l-30" placeholder="满额可包邮到物流站自行提货" :type="'number'" />
							<view class="">
								元
							</view>
						</view>
						<view  class=" u-p-t-30 u-p-b-30 u-font-32  u-flex u-col-center" style="background-color: #fff;">
							<view class="">
								包邮包送额
							</view>
							<u-input v-model="initData.freeDeliveryValue" class="u-m-l-30" placeholder="满额可包邮到物流站并包送上门" :type="'number'" />
							<view class="">
								元
							</view>
						</view>
					</view>
				</view>
				
				<view class="u-p-20 u-m-t-20 u-p-t-40 u-p-b-40 u-font-32 u-p-l-35 u-p-r-35 " style="background-color: #fff;" >
					<view class="u-flex u-col-center  u-p-t-30 u-p-b-30 u-row-between ">
						<view class="">
							售后
						</view>
						<u-switch v-model="initData.openAfterSales"  active-color="#FFBB1A" inactive-color="#ccc"></u-switch>
					</view>
				</view>
			</view>
		</view>
		
		
		<view class="apply-btn-container u-p-b-60">
			<u-button class="apply-btn" @click="applySubmit">确定</u-button>
		</view>
	
		<akLoading isFullScreen :active="loading"></akLoading>
	</view>
</template>

<script>
	import { useShopStore } from '@/store/shop.js';
	import { mapState } from 'pinia';
	export default {
		data(){
			return{
				methodList:[],
				navTitle:'编辑价格模板',
				loading:false,
				priceTemplateTypeList:[
					{
						value:1,
						name:'推广',
						isCheck:false,
						text:'设置后，客户可选择当前模板发送签约申请',
					},
					// {
					// 	value:2,
					// 	name:'推广',
					// 	isCheck:false,
					// 	text:'客户可申请签约，审核通过后生效',
					// },
				],
				initData:{
					baseValue:'',
					freeDeliveryValue:'',
					freeShippingValue:'',
					name:'',
					openAfterSales:false,
					priceTemplateType:0,
					profile:'',
					shopCollections:[],
					shopCollectionIds:[],
				}
			}
		},
		computed:{
			...mapState(useShopStore, {storeShop: 'shop'})
		},
		async onLoad(options){
			await this.getSellerMethodList();
			if(options.type == 'edit'){
				this.initData =  this.$u.deepMerge(this.initData,JSON.parse(options.data));
				let ary = [];
				this.initData.shopCollections.forEach((item,index)=>{
					this.methodList.forEach(child=>{
						if(child.id === item.id){
							ary.push(item.id);
							child.isCheck = true;
						}
					})
				});
				this.initData.shopCollectionIds = ary;
				this.priceTemplateTypeList[0].isCheck = ((this.initData.priceTemplateType&1)!==0);
				this.priceTemplateTypeList[1].isCheck = ((this.initData.priceTemplateType&2)!==0);
			};
		},
		methods:{
			priceTypeChange(val){
				let num = 0;
				this.priceTemplateTypeList.forEach(item=>{
					if(item.isCheck){
						num = num+item.value;
					}
				})
				this.initData.priceTemplateType =num;
			},
			checkboxGroupChange(val){
				this.initData.shopCollectionIds= val;
			},
			async getSellerMethodList(){
				this.loading = true;
				let params = {
					shopId:this.storeShop.id
				}
				const res = await this.$setHttp.get('api/Shop/GetShopCollections', {header:{shopId:this.storeShop.id}, params: params });
				this.loading = false;
				console.log(res); 
				if(res.code == 200){
						this.methodList = res.data.shopCollections.map(item=>{
							item.isCheck = false;
							return item;
						});
				}else{
					this.$u.toast('获取店铺支付方式列表失败')
				}
				
			},
			async applySubmit(){
				this.loading = true;
				if(this.initData.name==''){
					this.loading = false;
					this.$u.toast('模板名称不得为空');
					return false;
				}
				if(this.initData.priceTemplateType !==0){
					if(this.initData.profile==''){
						this.loading = false;
						this.$u.toast('签约条件描述不得为空');
						return false;
					}
					if(this.initData.shopCollectionIds.length === 0){
						this.loading = false;
						this.$u.toast('收款方式不得为空');
						return false;
					}
				}
				
				const res = await this.$setHttp.post('api/v1.2/Shop/SavePriceTemplate',this.initData,{header:{shopId:this.storeShop.id}});
				this.loading = false;
				if(res.code === 200){
					this.$u.toast('保存成功');
					this.$mHelper.delayedJump();
				}else{
					this.$u.toast('保存失败，错误信息：'+res.erroMessage)
				}
				
			},
		}
	}
</script>

<style lang="scss" scoped>
	.sn-must-input{
		&::before{
			content:'*';
			color:#ff551a;
		}
	}
	.check-item{
		border-bottom:1px solid #E5E5E5;
		&:nth-last-of-type(1){
			border: none;
		}
		.choose-radio{
			flex: 0 0 50rpx !important;
			width: 50rpx !important;
		}
	}
		
	.apply-btn-container{
		// position: fixed;
		// bottom: 100rpx;
		width: 100%;		
		margin-top: 30rpx;
		z-index: 999;
		display: block;
		.apply-btn{
			width: 80%;
			height: 90rpx;
			background: linear-gradient(-90deg, #FFBB1A, #FFBB1A);
			border-radius: 45rpx;
			&::after{
				border: none;
			}
		}
	}
	
</style>
